<template>
  <div class="goods-list">
    <div class="luyou">
      <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-model="homeData.goods"
        v-for="(item, index) in homeData.goods"
        :key="index"
        :title="item.titile"
        to="/home/goods"
      />
    </van-sidebar>
    </div>
    <div class="luyou1">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getShopInfo } from '@/api/shop.js'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      activeKey: 0
    }
  },
  computed: {
    ...mapState('m_home', ['homeData'])
  },
  watch: {
    activeKey: {
      async handler() {
        this.saveActiveKey(this.activeKey)
        const { data } = await getShopInfo()
        if (this.activeKey === 0) {
          this.saveGoodsList(data.goods_info.meat)
        } else if (this.activeKey === 4) {
          this.saveGoodsList(data.goods_info.vegetables)
        } else if (this.activeKey === 5) {
          this.saveGoodsList(data.goods_info.fruit)
        }
      },
      immediate: true
    }
  },
  created() {
    this.loadGoodList()
  },
  mounted() {},
  methods: {
    ...mapMutations('m_home', [
      'saveHomeData',
      'saveActiveKey',
      'saveGoodsList'
    ]),
    async loadGoodList() {
      const { data } = await getShopInfo()
      this.saveHomeData(data)
    }
  }
}
</script>

<style scoped lang="less">
.goods-list {
  height: 60vh;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  text-align: center;
  .van-sidebar {
    display: flex;
    flex-direction: column;
    .van-sidebar-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100px;
      border: 1px solid #eea57a;
      border-right: 0px solid;
      padding: 10px;
      // padding-top: 50px;
    }
  }
}
.luyou1 {
  height: 60vh;
  overflow-y: auto;
}
.luyou {
  height: 60vh;
  overflow-y: auto;
}
</style>
